<template>
  <!-- 下拉菜单 -->
  <view class="drop-down-menu" v-if="menuList.length">
    <view class="menu-section">
      <view class="menu-body">
        <view class="menu-list">
          <scroll-view
            scroll-x="true"
            :scroll-into-view="scrollToNode"
            :scroll-with-animation="true"
          >
            <view
              :id="'menu' + index"
              class="menu-list-item"
              :class="currentId == item.id ? 'active' : ''"
              v-for="(item, index) in menuList"
              :key="index"
              @click="handleMenuItem(item, index)"
            >
              {{ item.name }}
            </view>
          </scroll-view>
        </view>
        <view class="menu-icon" @click="handleMenuIcon">
          <i
            class="iconfont"
            :class="showMenuInfo ? 'icon-arrow-up' : 'icon-arrow-down'"
          ></i>
        </view>
      </view>
    </view>
    <view class="menu-info-popup" v-show="showMenuInfo">
      <view class="menu-info-list">
        <view
          class="info-item"
          :class="currentId == item.id ? 'active' : ''"
          v-for="(item, index) in menuList"
          :key="index"
          @click="handleMenuItem(item, index)"
        >
          {{ item.name }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
    menuList: {
      type: Array,
      default: [],
    },
    currentId:{
      type:[String,Number],
      default:0
    }
  },
  mixins: [],
  components: {},
  data() {
    return {
      showMenuInfo: false,
      activeMenu: 0,
      scrollToNode: "",
    };
  },
  mounted() {},
  computed: {
    adConfig() {
      return this.propsData.params.abConfig || {};
    },
  },
  methods: {
    handleMenuIcon() {
      if (!this.menuList.length) return;
      this.showMenuInfo = !this.showMenuInfo;
      if (this.showMenuInfo) {
        this.$emit("showMenuBg");
      } else {
        this.$emit("closeMenuBg");
      }
    },
    handleMenuItem(item, index) {
      if (this.activeMenu != -1 && index != this.activeMenu) {
        if (index >= this.activeMenu) {
          if (index + 1 <= this.menuList.length)
            this.scrollToNode = "menu" + index;
        } else {
          if (index - 1 >= -1) this.scrollToNode = "menu" + (index - 1);
        }
      }
      this.activeMenu = index;
      this.$emit("changeMenu", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.drop-down-menu {
  width: 73.06vw;
  min-height: 76rpx;
  background: #ffffff;
  position: relative;
  z-index: 20;
  top: -1px;
  .menu-section {
    width: 100%;
    height: 76rpx;
    display: flex;
    align-items: center;
  }
  .menu-body {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 32rpx;
    .menu-icon {
      width: 44rpx;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .iconfont {
        font-size: 34rpx;
      }
    }
    .menu-list {
      flex: 1;
      width: 80.29%;
      display: flex;
      align-items: center;
      scroll-view {
        white-space: nowrap;
      }
      .menu-list-item {
        height: 48rpx;
        background: #f5f6f7;
        border-radius: 120rpx;
        margin-right: 16rpx;
        padding: 0 16rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #262626;
        line-height: 48rpx;
        display: inline-block;
      }
      .active {
        font-weight: 600;
        color: #f0250e;
        background-color: rgba(240, 37, 14, 0.05);
      }
    }
    // .menu-list::-webkit-scrollbar {
    //   width: 0;
    //   height: 0;
    // }
  }

  .menu-info-popup {
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #f6f6f6;
    margin-top: 18rpx;
    .menu-info-list {
      padding: 2rpx 24rpx;
      display: flex;
      flex-wrap: wrap;
      .info-item {
        height: 48rpx;
        background: #f5f6f7;
        border-radius: 120rpx;
        padding: 0 30rpx;
        line-height: 48rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #262626;
        margin: 8rpx 4rpx;
      }
      .active {
        font-weight: 600;
        color: #f0250e;
        background-color: rgba(240, 37, 14, 0.05);
      }
    }
  }
}
</style>
